<template>
  <div class="app-container">
    <el-row style="margin-left: 0">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="姓名">
          <el-select v-model="queryParams.id" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="post">
          <el-select v-model="queryParams.post" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postName" :disabled="item.status == 1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-tree-select
            v-model="queryParams.dept"
            :data="deptOptions"
            :props="{ value: 'label', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择归属部门"
            check-strictly
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="queryParams.date" type="date" placeholder="请选择" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>
    <p>统计信息</p>
    <div ref="echartRefOne" style="width: 300px;height: 200px;" />
    <div />
    <div />
    <p>列表信息</p>
    <el-table :data="tableData" max-height="200">
      <el-table-column v-for="(item, index) in tableHeader" :key="index" :label="item.label" :prop="item.prop" />
    </el-table>
    <pagination v-show="totalNum > 0" :total="totalNum" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup lang="ts">
import { getUserList, getAttendancetable, getAttendanceecharts } from "@/api/personnelManagement";
import { getUser, deptTreeSelect } from "@/api/system/user";

import { reactive, ref, getCurrentInstance, onMounted } from "vue";
const echartRefOne = ref();
const { proxy } = getCurrentInstance() as any;

const showSearch = ref(true);
const userOptions = ref([]) as any;
const deptOptions = ref([]) as any;
const postOptions = ref([]) as any;
const tableData = ref([]) as any;
const totalNum = ref(0);
const queryParams = reactive({
  date: "",
  dept: "",
  id: "",
  post: "",
  pageNum: 1,
  pageSize: 10,
});
const tableHeader = ref([
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "部门",
    prop: "dept",
  },
  {
    label: "职位",
    prop: "post",
  },
  {
    label: "迟到次数",
    prop: "lateTime",
  },
  {
    label: "早退次数",
    prop: "earlyTime",
  },
  {
    label: "缺卡次数",
    prop: "lostTime",
  },
  {
    label: "请假次数",
    prop: "leaveTime",
  },
]) as any;
const getList = async () => {
  const data = await getAttendancetable(queryParams);
  if (data.code == 200) {
    tableData.value = data.rows;
    totalNum.value = data.total;
  }
  const res = await getAttendanceecharts(queryParams);
  if (res.code == 200) {
  }
};
getList();
const getUserLists = async () => {
  const { data, code } = await getUserList();
  if (code == 200) {
    userOptions.value = data;
  }
};
getUserLists();
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
  getUser().then((response) => {
    postOptions.value = response.posts;
  });
}
getDeptTree();

const resetQuery = () => {
  Object.keys(queryParams).map((key) => {
    queryParams[key] = "";
  });
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  getList();
};
const options = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};
onMounted(() => {
  if (echartRefOne.value) {
    const chartOne = proxy.echarts.init(echartRefOne.value);
    chartOne.setOption(options);
  }
});
</script>

<style scoped></style>
